{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_vip"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl pb-4 shadow bg-white">
			<div class="flex pb-3">
				<div class="flex-1 block-title-before py-2">招聘外包</div>
			</div>
			<div class="pt-3">
				<el-tabs v-model="search.type" :before-leave="tabsChange">
					<el-tab-pane label="服务说明" name="desc"></el-tab-pane>
					<el-tab-pane label="申请记录" name="record"></el-tab-pane>
				</el-tabs>
			</div>
			<div v-show="search.type=='desc'">
				<p class="text-secondary">服务说明</p>
			</div>
			<div v-show="search.type=='record'">
				<div class="table-responsive">
					<el-table
						ref="multipleTable"
				      	:data="tableData"
			    		stripe
			    		v-loading="search.ajax"
			    		style="width: 100%;"
			    		header-cell-class-name="bg-F4F4F4">
				      <el-table-column
				        prop="title"
				        label="岗位类别">
				      </el-table-column>
				      <el-table-column
				        prop="score"
				        label="服务类型"
				        width="100">
				      </el-table-column>
				      <el-table-column
				        prop="type"
				        label="联系人"
				        width="140">
				      </el-table-column>
				      <el-table-column
				        prop="status"
				        label="联系方式"
				        width="120">
				      </el-table-column>
				      <el-table-column
				        label="申请时间"
				        width="120">
				      </el-table-column>
				    </el-table>
				</div>
				<div class="table-responsive py-3">
					<el-pagination
					  background
					  :hide-on-single-page="true"
					  @current-change="setPage"
				      :current-page="search.page"
				      :page-size="15"
				      layout="total,  prev, pager, next, jumper"
				      :total="search.total">
				    </el-pagination>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			search:{
				type:'desc',
		    	ajax:false,
				total:0,
				page: 1
			},
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			setPage(val){},
			tabsChange(val){}
		})
	});
</script>
{/block}